<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录记录</title>
    <link rel="shortcut icon" href="./favicon.ico" />
    <link rel="stylesheet" href="dist/styles/iview.css">
    <script src="js/js.cookie.min.js"></script>
    <style>
        html,body,.container{
            width: 100%;height: 100%;
        }
        .container{
            position: relative;
            padding: 10px;
            overflow: hidden;
        }
        .header{
            height: 40px;
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="container" id="container">
        <Row style="margin: 10px 0">
            <i-col span="2" style="height: 100%;text-align:right;line-height:32px;">用户名称</i-col>
            <i-col span="8" style="padding: 0 10px;">
                <i-input v-model.trim="username"></i-input>
            </i-col>
            <i-col span="8">
                <i-button @click="onHandleClick">查询</i-button>
            </i-col>
        </Row>
        <i-table border :columns="columns" :data="tableData" :height="tableHeight" :loading="loading"></i-table>
    </div>
    <script src="dist/vue.min.js"></script>
    <script src="dist/iview.min.js"></script>
    <script src="js/gps51-jquery.js"></script>
    <script src="js/config.js"></script>
    <script src="js/util.js"></script>
    <script src="js/dateformat.js"></script>

    <script>
        var token = utils.getParameterByName("token");
        new Vue({
            el:"#container",
            data:{
                loading:false,
                username:"",
                tableHeight:100,
                columns:[
                    {
                        title:"logintimeStr",
                        key: 'logintimeStr',
                        width:160
                    },
                    {
                        title: "userid",
                        key: 'userid',
                        width:120
                    },
                    {
                        title: "fromstr",
                        key: 'fromstr',
                        width:80
                    },
                    {
                        title: "logintype",
                        key: 'logintype',
                        width:100
                    },
                    {
                        title: "pcbrowser",
                        key: 'pcbrowser'
                    },
                    {
                        title: "phonebrand",
                        key: 'phonebrand'
                    },
                    {
                        title: "phonemodel",
                        key: 'phonemodel'
                    },
                    {
                        title: "phonesdkversion",
                        key: 'phonesdkversion'
                    },
                    {
                        title: "phonesystem",
                        key: 'phonesystem'
                    },
                    {
                        title: "wxversion",
                        key: 'wxversion'
                    },
                    {
                        title: "ip",
                        key: 'ip'
                    },
                ],
                tableData:[]
            },
            methods: {
                getLoginRecords:function(){

                },
                calcTableHeight: function () {
                    var wHeight = window.innerHeight;
                    this.tableHeight = wHeight - 72;
                },
                onHandleClick:function(){
                    var url = myUrls.reportLoginLog() , me = this;
                    me.loading = true;
                    $.ajax({
                        url:url,
                        data:JSON.stringify({userid:this.username}),
                        method:"post",
                        success:function(resp){                           
                            if( resp.status == 0 && resp.logs){
                                resp.logs.forEach(function (item) { 
                                    item.logintimeStr = DateFormat.longToDateTimeStr(item.logintime, 0);
                                });
                                me.tableData = resp.logs;
                            }else{
                                me.tableData = [];
                            }
                        },
                        complete:function(){
                            me.loading = false;
                        }
                    })
                }
            },
            mounted () {
                var me = this;
                this.calcTableHeight();
                window.onresize = function () { 
                    me.calcTableHeight();
                }
            },
        })
    </script>
 
</body>
</html>